import React, { PureComponent } from 'react'

import { connect } from 'dva'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { downloadFile, goToRouter } from '@/utils/utils'
import CopyToClipboard from '@/components/CopyToClipboard'
import status from '@/config/status.config'

import {
  Table,
  Card,
  message,
  Button,
  Drawer,
  Form,
  Select,
  Spin,
  Divider
} from 'antd'
import moment from 'moment'
import { withShopStatus } from '@/utils/enum'
import SplitBillService from './services/splitBill'
import Search from '../../components/Search'

const detailsStatus = {
  '01': '待支付',
  '02': '支付中',
  // '03': '已支付申请关单',
  '04': '待发货',
  '05': '待确认收货',
  '06': '租用中',
  '07': '待结算',
  '08': '结算待支付',
  '09': '订单完成',
  '10': '交易关闭'
}

@connect()
@Form.create()
class NormalSplitBill extends PureComponent {
  state = {
    tableData: [],
    loading: true,
    arrStatus: ['0/正在审核', '1/审核不通过', '2/审核通过'],
    current: 1,
    pageNumber: 1,
    pageSize: 10,
    type: null,
    shopId: null,
    shopName: null,
    status: null,
    visible: false,
    spinning: false,
    filter: {}
  }

  columns = [
    {
      title: '订单编号',
      dataIndex: 'orderId',
      width: 140,
      render: text => <CopyToClipboard text={text} />
    },
    /* { title: '店铺名称', dataIndex: 'shopName', key: 'shopName', width: 120}, */
    {
      title: '结算期数/总期数',
      dataIndex: 'payedPeriods',
      width: 100,
      render: (text, record) => {
        return `${record.period}/${record.totalPeriod}`
      }
    },
    {
      title: '租金',
      dataIndex: 'userPayAmount',
      width: 80,
      render: text => (text < 0 ? 0 : text)
    },
    {
      title: '状态',
      dataIndex: 'orderStatus',
      width: 80,
      render: text => detailsStatus[text]
    },
    { title: '支付时间', dataIndex: 'userPayTime' },
    { title: '账单到期时间', dataIndex: 'statementDate' },
    {
      title: '商家结算金额',
      dataIndex: 'toShopAmount',
      render: text => (text < 0 ? 0 : text)
    },
    {
      title: '平台佣金',
      dataIndex: 'toOpeAmount',
      render: text => (text < 0 ? 0 : text)
    },
    {
      title: '与商家结算状态',
      dataIndex: 'status',
      render: text => withShopStatus[text]
    },
    { title: '结算人', dataIndex: 'name' },
    { title: '结算时间', dataIndex: 'createTime', key: 'crateTime' },
    {
      title: '操作',
      align: 'center',
      key: 'action',
      fixed: 'right',
      render: (text, record) => {
        return (
          <div className="table-action">
            <a onClick={() => this.preview(record.id)}>查看</a>
          </div>
        )
      }
    }
  ]

  componentDidMount() {
    this.initData()
  }

  initData = () => {
    const payload = {
      pageNumber: this.state.pageNumber,
      pageSize: this.state.pageSize,
      ...this.state.filter
    }
    if (payload.createDate && payload.createDate.length > 1) {
      payload.createTimeStart = moment(payload.createDate[0]).format(
        'YYYY-MM-DD HH:mm:ss'
      )
      payload.createTimeEnd = moment(payload.createDate[1]).format(
        'YYYY-MM-DD HH:mm:ss'
      )
    }
    this.setState(
      {
        loading: true
      },
      () => {
        SplitBillService.rentPage(payload).then(res => {
          message.success('获取信息成功')
          this.setState({
            tableData: res.records,
            total: res.total,
            loading: false,
            current: res.current
          })
        })
      }
    )
  }

  handleFilter = (data = {}) => {
    if (data.type && data.type === '分页') {
      this.initData()
    } else {
      this.setState(
        {
          pageNumber: 1,
          pageSize: 10,
          filter: data
        },
        () => {
          this.initData()
        }
      )
    }
  }

  handleExportData = (filter = {}) => {
    if (filter.createDate && filter.createDate.length > 1) {
      filter.createTimeStart = moment(filter.createDate[0]).format(
        'YYYY-MM-DD HH:mm:ss'
      )
      filter.createTimeEnd = moment(filter.createDate[1]).format(
        'YYYY-MM-DD HH:mm:ss'
      )
    }
    SplitBillService.buyOutExport(filter).then(res => {
      location.href = res
    })
  }

  // 分页，下一页
  onChange = pageNumber => {
    this.setState(
      {
        pageNumber
      },
      () => {
        this.handleFilter({ type: '分页' })
      }
    )
  }

  showTotal = () => {
    return `共有${this.state.total}条`
  }

  // 切换每页数量
  onShowSizeChange = (current, pageSize) => {
    this.setState({ pageSize }, () => {
      this.handleFilter({ type: '分页' })
    })
  }

  preview = id => {
    this.setState(
      {
        visible: true,
        spinning: true
      },
      () => {
        goToRouter(this.props.dispatch, `/finance/normal/detail/${id}`)
      }
    )
  }

  render() {
    const {
      loading,
      current,
      total,
      arrStatus,
      visible,
      spinning,
      tableData
    } = this.state

    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Search
            needExport
            arrStatus={arrStatus}
            source="常规订单"
            exportData={this.handleExportData}
            handleFilter={this.handleFilter}
          />
        </Card>
        <Card bordered={false} style={{ marginTop: 20 }}>
          <Table
            scroll={{ x: true }}
            columns={this.columns}
            loading={loading}
            dataSource={tableData}
            rowKey={record => record.id}
            pagination={{
              current,
              total,
              onChange: this.onChange,
              showTotal: this.showTotal,
              showQuickJumper: true,
              pageSizeOptions: ['5', '10', '20'],
              showSizeChanger: true,
              onShowSizeChange: this.onShowSizeChange
            }}
          />
        </Card>
      </PageHeaderWrapper>
    )
  }
}

export default NormalSplitBill
